bootstrap-datepicker

What is bootstrap-datepicker?

The bootstrap-datepicker npm package is a flexible and customizable datepicker plugin for Bootstrap. It allows users to easily add date selection functionality to their web applications with a variety of options and configurations.

What are bootstrap-datepicker's main functionalities?

Basic Datepicker

This feature allows you to add a basic datepicker to an input field. The datepicker will pop up when the input field is focused, allowing users to select a date.

<input type="text" class="datepicker">
<script>
  $('.datepicker').datepicker();
</script>

Date Range Picker

This feature allows you to add two datepickers to input fields to select a start and end date, useful for date range selection.

<input type="text" class="start-date">
<input type="text" class="end-date">
<script>
  $('.start-date').datepicker();
  $('.end-date').datepicker();
</script>

Custom Date Format

This feature allows you to customize the date format displayed in the datepicker. In this example, the date format is set to 'mm/dd/yyyy'.

<input type="text" class="datepicker">
<script>
  $('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
  });
</script>

Disable Specific Dates

This feature allows you to disable specific dates in the datepicker. In this example, weekends (Saturdays and Sundays) are disabled.

<input type="text" class="datepicker">
<script>
  $('.datepicker').datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      return [(day != 0 && day != 6)];
    }
  });
</script>

Inline Datepicker

This feature allows you to create an inline datepicker that is always visible, rather than appearing in a popup.

<div class="datepicker"></div>
<script>
  $('.datepicker').datepicker({
    inline: true
  });
</script>

Other packages similar to bootstrap-datepicker

react-datepicker

react-datepicker is a popular datepicker component for React applications. It offers a wide range of features similar to bootstrap-datepicker, such as date range selection, custom date formats, and disabling specific dates. It is specifically designed for use with React, making it a great choice for React developers.

flatpickr

flatpickr is a lightweight and powerful datetime picker. It offers a similar range of features to bootstrap-datepicker, including date range selection, custom date formats, and disabling specific dates. flatpickr is framework-agnostic, meaning it can be used with any JavaScript framework or library.

pickadate

pickadate is a flexible and customizable datepicker and timepicker plugin. It provides similar functionalities to bootstrap-datepicker, such as custom date formats and disabling specific dates. pickadate is known for its ease of use and extensive customization options.

README

bootstrap-datepicker

Versions are incremented according to semver.

CDN

You can use the CloudFlare powered cdnjs.com on your website.

bootstrap-datepicker on cdnjs

Please note: It might take a few hours until a new version is available on cdnjs.

Links

• Online Demo
• Online Docs (ReadTheDocs.com)
• Google Group
• Travis CI

Snippets

• Booking demo with two pickers

Development

Once you cloned the repo, you'll need to install grunt and the development dependencies using a package manager:

• yarn (recommended):

$ [sudo] yarn global add grunt-cli
$ yarn install

• npm:

$ [sudo] npm install --global grunt-cli
$ npm install